<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">班级科目成绩统计</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <div style="float:left;padding:6px;">
                <span>专业编号：</span>
            </div>
            <div style="float:left;">
                <select id="mid" class="form-control" style="width:180px;">
                    <option value="11">11</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div style="float:left;padding:6px;">
                <span>年级：</span>
            </div>
            <div style="float:left;">
                <select id="gradeid" class="form-control" style="width:180px;">
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                </select>
            </div>

            <div style="float:left;padding:6px;">
                <span>班级：</span>
            </div>
            <div style="float:left;">
                <select id="classid" class="form-control" style="width:180px;">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div style="float:left;padding:6px;">
                <span>课程名：</span>
            </div>
            <div style="float:left;">
                <select id="cname" class="form-control" style="width:180px;">
                    <option value="计算机基础">计算机基础</option>
                    <option value="程序设计">程序设计</option>
                    <option value="微机原理">微机原理</option>
                    <option value="数据结构">数据结构</option>
                    <option value="计算机网络">计算机网络</option>
                </select>
            </div>


        </div>
    </div>
</div>
</div>

<div class="box1">
    <div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
</div>
      <!--为饼图准备一个具备大小（宽高）的DOM-->

<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/msg.js"></script>
    <script type="text/javascript">
        // 页面加载时调用
        $(function (){
            getChart();
        })
        // 获取表
        function getChart(){
            // 获取下拉框选中的值
            // 专业编号
            let mid1 = $("#mid option:selected").val()
            console.log(mid1)
            let gradeid1 = $("#gradeid option:selected").val()
            console.log(gradeid1)
            let classid1 = $("#classid option:selected").val()
            console.log(classid1)
            let cname1 = $("#cname option:selected").val()
            console.log(cname1)


            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            let levels=[];
            let nums=[];
            let dat = [];
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            $.ajax({
                url:"/webapi/subject/getscore",
                method: "post",
                async: true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                data:{
                    mid: mid1,
                    gradeid: gradeid1,
                    classid: classid1,
                    cname: cname1
                },
                success:function (result){
                    console.log(result)
                    if(result.code === 405){
                        myChart.hideLoading();
                        myChart.setOption({
                            title: [{
                                text: "暂无信息",
                                x: "center",
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: "normal"
                                }
                            },
                                {
                                    subtext:""
                                }],
                            legend: {},
                            tooltip: {},
                            series: {
                                name: "",
                                type: "",
                                radius: "0%",
                                data: result.data
                            }
                        })
                        message.showText("error",result.msg);
                    }else if
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    (result.code === 200){
                        let rs = result.data;
                        for (let i = 0;i < rs.length;i++){
                            let info = {};
                            info.name = rs[i].name;
                            info.value = rs[i].value;
                            levels.push(rs[i].name);
                            nums.push(rs[i].value);
                            dat.push(info);
                        }
                        myChart.hideLoading();  //隐藏加载动画
                        myChart.setOption({
                            title:[{
                                text: "学生成绩统计",
                                x: "center",
                                },
                                {
                                    x:"center",
                                    subtext: "(优:90-100,良:80-89,一般:70-79,较差:60-69,不及格:0-59)",
                                    padding: [20,0,0,0],
                                    subtextStyle:{
                                        color:"#ccc",//字体颜色
                                        fontStyle:'normal',//字体风格
                                        fontWeight:'normal',//字体粗细
                                        fontFamily:'sans-serif',//文字字体
                                        fontSize:13,//字体大小
                                        lineHeight:13,//字体行高
                                        // align:'center',//'left' | 'right' ，文字水平对齐方式
                                        // verticalAlign:'middle',//'top' | 'bottom' ，文字垂直对齐方式
                                    }
                                }
                            ],
                            tooltip:{
                                trigger: "item",
                                formatter: "{a} <br/> {b} : {c} ({d}%)"
                            },
                            legend:{
                                orient: "vertical",
                                left: "left",
                                data: levels
                            },
                            series: [{
                                name: "成绩",
                                type: "pie",
                                radius: "55%",
                                center: ['50%','60%'],
                                data: dat,
                                itemStyle:{
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        })
                        message.showText("success",result.msg);
                    }
                },
                error:function (errorMsg){
                    console.log(errorMsg);
                    message.showText("error","图表数据请求失败！");
                    myChart.hideLoading();
                }
            })
        }

        // 下拉框值改变时调用
        $("#mid").change(function (){
            getChart()
        })

        $("#gradeid").change(function (){
            getChart()
        })

        $("#classid").change(function (){
            getChart()
        })

        $("#cname").change(function (){
            getChart()
        })
    </script>
</body>
</html>